// @ts-nocheck
import styles from "./index.module.less"
import { IconPlay } from "@codexteam/icons"
import { make } from "../../utils/dom"
import ControlUploadDomBase from "../../lib/uploadDom/index"

class Video {
	static get toolbox() {
		return {
			title: "Video",
			icon: IconPlay,
		}
	}
	static get isReadOnlySupported() {
		return true
	}
	constructor({ data, api, config, readOnly }) {
		this.data = {
			url: data.url,
		}
		this.api = api
		this.readOnly = readOnly
		this.config = config || {}
		this.wrapper = undefined
	}
	render() {
		this.wrapper = make("div", styles["cx-custom-video"])

		if (this.data && this.data.url) {
			const isFrame = this.data.url.includes("<iframe")
			if (isFrame) {
				this.wrapper.innerHTML = this.data.url
			} else {
				const video = make("video", styles.video, { src: this.data.url, controls: true })
				this.wrapper.append(video)
			}
		} else {
			const config = {
				placeholder: this.config.placeholder,
				renderButtonText: "渲染视频",
			}
			const controlUploadDomBase = new ControlUploadDomBase(this.wrapper, this.api, config)
			controlUploadDomBase.render()
			// // 创建输入框, 按钮
			// const controlBox = make('div', styles.controlBox);
			// const saveBtn = make('div', styles.saveBtn, { innerText: "渲染视频" });
			// const ipt = make('input', styles.ipt, { placeholder: this.config.placeholder });
			// controlBox.append(ipt, saveBtn);
			// this.wrapper.append(controlBox);

			// // 监听编辑和保存事件
			// this.api.listeners.on(saveBtn, 'click', () => {
			//     const curIdx = this.api.blocks.getCurrentBlockIndex();
			//     const curBlock = this.api.blocks.getBlockByIndex(curIdx);
			//     this.api.blocks.update(curBlock.id, {
			//         url: ipt.value
			//     })
			// }, false)
		}

		return this.wrapper
	}

	save(blockContent) {
		return this.data
	}
}
export default Video
